<template>
    <div class="invest">
        <div v-for="item in BulletinTypeList" :key="item.id">
            <div class="images">
                <h3>{{ item.name }}</h3>
            </div>
            <div class="borders">
                <ul>
                    <li v-show="index1<6" v-for="(item1, index1) in item.BulletinList" :key="item1.id">
                        {{index1+1}}.{{item1.title}}
                    </li>
                </ul>
                <div class="more" @click="handleMore(item)">
                    更多>>>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script setup>
import { reactive,onMounted,ref } from "vue"
import { useRouter } from "vue-router"
import {GetData} from '@/api/index'
import { useStore } from 'vuex'

    const router = useRouter()

    const store = useStore()
    // 跳转到详情页
    const handleMore = (item) => {
        store.commit('upBulletin',item)
        router.push("/investmentpolicys")
    }


    onMounted(()=>{
        GetDataAffiche()
    })

    const BulletinTypeList = ref([])

    // 获取全部公告分类
    const GetDataAffiche = async ()=>{
        let res = await GetData('getTypeList?type=GG')
        res = res.filter(item=>item.name==='投资指南'||item.name==='招商政策'||item.name==='要素保障'||item.name==='新闻动态')
        console.log(res,34434334);
        BulletinTypeList.value = res
        BulletinTypeList.value.forEach(async item=> item.BulletinList = await GetData('getBulletinList?typeId='+item.id))
        console.log(BulletinTypeList.value,123123123123);
    }

</script>

<style scoped lang="less">
*{
    list-style: none;
}
.invest{
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    div{
        width: 49%;
        height: 50%;
        margin-left: 1%;
        line-height: 240%;
        .images{
            height: 10%;
            background: url('@/assets/imgs/jiao.png') no-repeat;
            background-size: 100% 100%;
            h3{
                color: white;
                margin-left: 4%;
            }
        }
        .borders{
            width: 95%;
            height: 82%;
            border: 1px solid rgb(40, 110, 148);
            position: relative;
            ul{
                margin-top: 1%;
                li{
                    margin: 0 5%;
                    height: 100%;
                    line-height: 255%;
                    border-bottom: 2px rgb(40, 110, 148) dashed;
                    color: rgb(40, 110, 148);
                }
                li:last-child{
                    border: none;
                }
            }
            .more{
                width: 6vw;
                height: 4vh;
                background: rgb(220, 239, 246);
                text-align: center;
                line-height: 4vh;
                font-weight: 600;
                color: rgb(24, 77, 157);
                // margin: 2% 0 0 83%;
                cursor: pointer;
                position: absolute;
                top: 85%;
                left: 80%;
            }
        }
    }
}

</style>
